import { Form, Input, Button, Space, message, Select } from "antd";
import { useModel } from "umi";

import { UpdateInnerMemberInfo } from "../../_modals/_graphql/edit.inner";

import useAllPositions from "../../hooks/position/useAllPositions";

const layout = { labelCol: { span: 6 }, wrapperCol: { span: 16 } };
const tailLayout = { wrapperCol: { offset: 6, span: 16 } };

const EditInnerMemberInfo = ({ record, index, updateMemberInfo }) => {
    const { remoteData } = useModel("global");
    const { organizationUuid } = useModel("organization.info");
    const { onCloseGlobalModal } = useModel("global.modal");
    const [form] = Form.useForm();
    const { loading, positions } = useAllPositions();

    const onFinish = async (values) => {
        values.omUuid = record.omUuid;
        let res = await remoteData({
            object: "multi-organization-gateway",
            serviceName: "/graphql/public_graphql_service",
            organizationUuid,
            params: { query: UpdateInnerMemberInfo, variables: values },
        });
        if (res) {
            message.success("成功修改外部成员信息");
            updateMemberInfo(values, index);
            onCloseGlobalModal();
        }
    };

    return (
        <Form {...layout} form={form} onFinish={onFinish} initialValues={record} style={{ padding: "20px 0" }}>
            <Form.Item name="omPosi" label="职位名称" rules={[{ required: true }]}>
                <Select
                    loading={loading}
                    placeholder="请选择"
                    allowClear
                    options={positions.map((item) => ({ opName: item.opName }))}
                    fieldNames={{ label: "opName", value: "opName" }}
                />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Space>
                    <Button type="primary" htmlType="submit">
                        保存修改
                    </Button>
                    <Button htmlType="button" onClick={() => form.resetFields()}>
                        重置
                    </Button>
                </Space>
            </Form.Item>
        </Form>
    );
};

export default EditInnerMemberInfo;
